<template>
	<div class="order">
		<cl-crud @load="onLoad">
			<!-- 筛选 -->
			<template #slot-datepicker>
				<div class="_top-filter">
					<div style="width:125px;">
						<el-select
							size="mini"
							class="time-type"
							v-model="selects.timeType"
							@change="val => refresh({ timeType: val, page: 1, sort: 'desc' })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>
					<div style="width:350px;">
						<date-picker
							style="width:350px;"
							:datas="datas"
							@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<!-- <div style="width:125px;margin-left:10px">
						<el-select
							size="mini"
							class="selects"
							v-model="selects.tkStatus"
							@change="val => refresh({ tkStatus: val, page: 1 })"
						>
							<el-option label="订单状态" value=""></el-option>
							<el-option label="订单结算" :value="3"></el-option>
							<el-option label="订单付款" :value="12"></el-option>
							<el-option label="订单失效" :value="13"></el-option>
						</el-select>
					</div> -->
				</div>
			</template>
			<template #table-column-goodsTitle="{scope}">
				<goodsTitle :data="scope.row"></goodsTitle>
			</template>
			<template #table-column-programme>
				<div class="programme">
					<div @click="openProgramme(1)">方案1</div>
					<div @click="openProgramme(2)">方案2</div>
					<div @click="openProgramme(3)">方案3</div>
				</div>
			</template>
		</cl-crud>
		<!-- <cl-form ref="cl-form"></cl-form> -->
	</div>
</template>
<script>
import DatePicker from '@/components/order/date-picker';
import goodsTitle from '@/components/analysis/goods-title.vue';
import { dateFormat } from '@/utils/index';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: ''
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime],
			params: {
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime
			}
		};
	},
	components: {
		DatePicker,
		goodsTitle
	},
	methods: {
		// 方案详情
		// openProgramme(i) {
		// 	this.$refs['cl-form'].open({
		// 		props: {
		// 			title: '方案详情',
		// 			width: '550px',
		// 			'label-width': '0px'
		// 		},
		// 		items: [
		// 			{
		// 				prop: 'openProgramme',
		// 				component: <div>方案{i}</div>
		// 			}
		// 		],
		// 		op: {
		// 			layout: [] // 同crud下的layout
		// 		}
		// 	});
		// },
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.order)
				.set('dict', {
					search: {
						query: 'salesStatus'
					},
					api: {
						page: 'productAnalysis'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 100
						},
						{
							label: '商品ID',
							prop: 'itemId',
							align: 'center',
							minWidth: 200
						},
						{
							label: '商品标题',
							prop: 'goodsTitle',
							align: 'center',
							minWidth: 450
						},
						{
							label: '有效订单',
							prop: 'validOrderNum',
							align: 'center',
							minWidth: 250,
							emptyText: '0',
							sortable: 'custom'
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							minWidth: 250,
							emptyText: '0',
							sortable: 'custom'
						}
						// {
						// 	label: '类目',
						// 	prop: 'itemCategoryName',
						// 	align: 'center',
						// 	emptyText: '无',
						// 	minWidth: 140
						// },
						// {
						// 	label: '推广方案',
						// 	prop: 'programme',
						// 	align: 'center',
						// 	emptyText: '无',
						// 	minWidth: 140
						// }
					],
					op: {
						visible: false
					}
				})
				.set('search', {
					key: {
						placeholder: '商品 ，店铺标题'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh({
				...this.params,
				sort: 'desc',
				timeType: 0,
				prop: 'validCommission'
			});
		},
		refresh(params) {
			if (params.startTime) {
				this.params = {
					...params
				};
			}
			this.crud.refresh(params);
		},
		openWindow(link) {
			if (this.params.startTime && this.params.endTime) {
				window.open(
					link.href +
						'&startTime=' +
						this.params.startTime +
						'&endTime=' +
						this.params.endTime,
					'_blank'
				);
			} else {
				window.open(link.href, '_blank');
			}
		}
	}
};
</script>
<style lang="stylus" scoped>
.crud-index {
    padding 10px
}
.order {
    height 100%
}
.programme {
	div {
		cursor pointer;
		&:hover {
			color: $main-color
		}
	}
}
</style>
